<style scoped>
.slideshow{
    
}

.slideshow-item-container{
    min-height: 300px;
    max-height: 80vh;
    
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow-item-container img{
    width: 100%;
}

</style>
<template>
  <div>
      <Button size='small' type='primary' @click='showModal'> 查看 </Button>
      <Modal
        width='80%'
        footer-hide
        v-model="visibal"
        @on-cancel="hiddenModal">
                
        <Carousel v-if='visibal' v-model="current" class="slideshow">
            <CarouselItem class="slideshow-item" v-for="(url, index) of urlsProxy" :key="index">
                <div class="slideshow-item-container">
                    <!-- <img :src="`http://www.1c1l.com${url}`" /> -->
                    <img :src="url" />
                </div>
            </CarouselItem>
        </Carousel>
       
    </Modal>
  </div>
</template>

<script>
export default {
    
    props:{
        urls:{
            defualt: ''
        }
    },

    data(){
        return {
            visibal: false,
            current: 0,
        }
    },

    computed:{
        urlsProxy(){
            // const separator = ','
            
            // mock
            const separator = '|'
            return this.urls.split(separator) || []
        }
    },
    
    methods:{

        showModal(){
            this.visibal = true
        },

        hiddenModal(){
            this.visibal = false
        }
    }
    

}
</script>
